<script setup>
/**
 * @/views/admin/WebPage.vue
 * 数据展示页面
 */

/* 引入 Vue 和 ECharts */
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

/* 数据示例：用户访问数量、小镇数量、商家数量 */
const chartData = ref({
  users: 1200, // 用户访问数量
  towns: 35, // 小镇数量
  businesses: 87, // 商家数量
});

/* 初始化 ECharts 图表 */
const initChart = () => {
  // 初始化柱状图
  const barChart = echarts.init(document.getElementById("bar-chart"));
  barChart.setOption({
    title: {
      text: "关键指标柱状图", // 标题
      left: "center", // 标题居中
    },
    tooltip: {
      trigger: "axis", // 鼠标悬停时显示数据
    },
    xAxis: {
      type: "category", // X轴为类目轴
      data: ["用户访问量", "小镇数量", "商家数量"], // 类目数据
    },
    yAxis: {
      type: "value", // Y轴为数值轴
    },
    series: [
      {
        name: "数量", // 数据名称
        type: "bar", // 图表类型：柱状图
        data: [
          chartData.value.users,
          chartData.value.towns,
          chartData.value.businesses,
        ], // 图表数据
        itemStyle: {
          color: "#4CAF50", // 柱状图颜色
        },
      },
    ],
  });

  // 初始化饼状图
  const pieChart = echarts.init(document.getElementById("pie-chart"));
  pieChart.setOption({
    title: {
      text: "关键指标占比", // 标题
      left: "center", // 标题居中
    },
    tooltip: {
      trigger: "item", // 鼠标悬停时显示数据
    },
    legend: {
      bottom: "5%", // 图例位置：底部
      left: "center", // 图例居中
    },
    series: [
      {
        name: "数量占比", // 数据名称
        type: "pie", // 图表类型：饼状图
        radius: "50%", // 饼状图半径
        data: [
          { value: chartData.value.users, name: "用户访问量" },
          { value: chartData.value.towns, name: "小镇数量" },
          { value: chartData.value.businesses, name: "商家数量" },
        ], // 饼状图数据
        itemStyle: {
          borderRadius: 8, // 圆角
          borderColor: "#fff", // 边框颜色
          borderWidth: 2, // 边框宽度
        },
      },
    ],
  });
};

/* 生命周期：页面加载完成后初始化图表 */
onMounted(() => {
  initChart(); // 初始化图表
});
</script>

<template>
  <div class="data-dashboard">
    <!-- 页面标题 -->
    <div class="header">
      <h2>管理员-网站管理</h2>
    </div>

    <!-- 图表区域，使用 el-row 和 el-col 控制布局 -->
    <el-row gutter="20">
      <!-- 柱状图 -->
      <el-col :xs="24" :md="12">
        <el-card class="chart-card">
          <!-- 柱状图容器 -->
          <div id="bar-chart" class="chart-container"></div>
        </el-card>
      </el-col>
      <!-- 饼状图 -->
      <el-col :xs="24" :md="12">
        <el-card class="chart-card">
          <!-- 饼状图容器 -->
          <div id="pie-chart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
/* 页面容器样式 */
.data-dashboard {
  padding: 20px;
  background-color: #f9f9f9; /* 页面背景色 */
}

/* 页面标题样式 */
.header {
  text-align: center; /* 标题居中 */
  margin-bottom: 20px; /* 标题与图表之间的间距 */
}

/* 图表卡片样式 */
.chart-card {
  padding: 20px;
  background-color: #fff; /* 卡片背景色 */
  border-radius: 8px; /* 卡片圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
}

/* 图表容器样式 */
.chart-container {
  width: 100%; /* 宽度为 100% */
  height: 400px; /* 固定高度 400px */
}

/* 响应式布局：在小屏幕时每个图表占满整行，大屏幕时每个图表占半行 */
@media (max-width: 768px) {
  .chart-container {
    height: 300px; /* 在小屏幕上调整图表高度 */
  }
}
</style>
